<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <script type="text/javascript">
    // 通过 es6 Proxy 来实现一个数据响应式
    // obj 对象  setBind set方法  getLogger get方法
    let onWatch = (obj, setBind, getLogger) => {
      let handler = {
        // target 是要拦截的目标  
        get(target, property, receiver) {
          getLogger(target, property)
          // target 目标对象 property 对应属性 receiver setter方法
          return Reflect.get(target, property, receiver)
        },
        set(target, property, value, receiver) {
          setBind(value, property)
          // 相当于 vue的 $set
          return Reflect.set(target, property, value)
        }
      }
      // obj 需要拦截的对象  handler 拦截行为
      return new Proxy(obj, handler)
    }

    let obj = { a: 1 }
    let p = onWatch(
      obj,
      (v, property) => {
        console.log(`监听到属性${property}改变为${v}`)
      },
      (target, property) => {
        console.log(`'${property}' = ${target[property]}`)
      }  
    )
    p.a = 2
    p.a
    p.b
  </script>
</body>
</html>